<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
      <h1>The Ajax 01 Page</h1>
      <button onclick="doAjaxStart()">Ajax Get Request</button>
      <span id="result"></span>
  </div>
  <script>
       //js中问题的解决方案:console.log(),debugger,排除法
       function doAjaxStart(){
          debugger //js中断点
          // console.log("==doAjaxStart()==")
          //初始化span标记内部内容(可选)
          let span=document.getElementById("result");
          span.innerHTML="Data is loading....."
         //创建XHR对象
          let xhr=new XMLHttpRequest();
         //设置状态监听
          xhr.onreadystatechange=function(){
              //readyState==4表示服务端响应到客户端的数据已经接收完成
              //status==200 表示服务端处理过程OK的,500表示异常
              if(xhr.readyState==4&&xhr.status==200){
                  span.innerHTML=xhr.responseText;
              }
          }
           const url="http://localhost/doAjaxStart";
          //建立连接
           xhr.open("GET",url,true);//true 表示异步
          //发送请求
           xhr.send(null);
           //console.log("==main==")
       }
  </script>
</body>
</html>